<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v1.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v10.html

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<md-content flex class="workspace-projects-content">

  <che-list-header-additional-parts>
    <div che-multi-transclude-part="che-list-add-button">
      <add-project-popover is-project-name-unique="workspaceDetailsProjectsCtrl.isProjectNameUnique(name)"
                           project-on-add="workspaceDetailsProjectsCtrl.projectTemplateOnAdd(templates)"></add-project-popover>
    </div>
    <div che-multi-transclude-part="che-list-delete-button">
      <che-list-header-delete-button ng-if="workspaceDetailsProjectsCtrl.cheListHelper.isNoItemSelected === false"
                                     title="Delete"
                                     disabled="workspaceDetailsProjectsCtrl.workspaceIsRunning() === false"
                                     disabled-message="Projects cannot be removed in stopped workspace."
                                     on-delete="workspaceDetailsProjectsCtrl.deleteSelectedProjects()"></che-list-header-delete-button>
    </div>
    <div che-multi-transclude-part="che-list-search">
      <che-list-header-search placeholder="Search"
                              query="workspaceDetailsProjectsCtrl.projectFilter.name"
                              on-change="workspaceDetailsProjectsCtrl.onSearchChanged(query)"></che-list-header-search>
    </div>
  </che-list-header-additional-parts>

  <che-list-header
    che-hide-header="workspaceDetailsProjectsCtrl.cheListHelper.visibleItemsNumber === 0">
    <div flex="100"
         layout="row"
         layout-align="start stretch"
         class="che-list-item-row">
      <div layout="column" layout-gt-xs="row"
           layout-align="start center"
           class="che-checkbox-area">
        <div layout="row" layout-align="center center" class="che-list-item-checkbox-main">
          <md-checkbox class="che-list-item-checkbox"
                       aria-label="Project list"
                       ng-checked="workspaceDetailsProjectsCtrl.cheListHelper.areAllItemsSelected"
                       ng-click="workspaceDetailsProjectsCtrl.cheListHelper.changeBulkSelection()"></md-checkbox>
        </div>
      </div>
      <div flex hide-xs layout-gt-xs="row"
           layout-align="start center"
           class="che-list-item-details">
        <che-list-header-column flex-gt-xs="30"
                                che-sort-value="workspaceDetailsProjectsCtrl.projectOrderBy"
                                che-sort-item="name"
                                che-column-title="Name"></che-list-header-column>
        <che-list-header-column flex-gt-xs="50"
                                che-sort-value="workspaceDetailsProjectsCtrl.projectOrderBy"
                                che-sort-item="description"
                                che-column-title="Description"></che-list-header-column>
        <che-list-header-column flex-gt-xs="20"
                                che-column-title="Actions"></che-list-header-column>
      </div>
    </div>
  </che-list-header>

  <che-list class="workspace-details-projects-list" flex ng-show="workspaceDetailsProjectsCtrl.cheListHelper.visibleItemsNumber > 0">
    <che-project-item
            ng-repeat="project in workspaceDetailsProjectsCtrl.cheListHelper.getVisibleItems() | orderBy:workspaceDetailsProjectsCtrl.projectOrderBy"
            che-project-item-workspace="workspaceDetailsProjectsCtrl.workspaceDetails"
            che-on-checkbox-click="workspaceDetailsProjectsCtrl.cheListHelper.updateBulkSelectionStatus()"
            ng-model="workspaceDetailsProjectsCtrl.cheListHelper.itemsSelectionStatus[project.name]"
            che-project-item-project="project"
            che-profile-creation-date="workspaceDetailsProjectsCtrl.profileCreationDate"
            che-has-action="false === workspaceDetailsProjectsCtrl.isNewProject(project.name)"
            flex-gt-sm="100" flex="33"></che-project-item>
  </che-list>
  <div class="che-list-empty">
        <span ng-show="workspaceDetailsProjectsCtrl.projects.length > 0 && workspaceDetailsProjectsCtrl.cheListHelper.visibleItemsNumber === 0">
          No projects found.
        </span>
    <span ng-show="workspaceDetailsProjectsCtrl.projects.length === 0">There are no projects.</span>
  </div>
</md-content>
